import React, { useState, useEffect } from 'react';
import { createForm } from 'rc-form'
import {
    NavBar,
    Icon,
    List,
    InputItem,
    TextareaItem,
    Button,
    Toast,
    Accordion
} from 'antd-mobile';


import { GetOrderDetails } from "@/api/tutor/orderList.js"
import { R, VOID, ORDER_STATUSES, createInfoWindow } from "@/assets/js/dict.js"
import './orderDetails.scss';

import star_selected from "@/assets/svg/star_selected.svg"
import star_unselected from "@/assets/svg/star_unselected.svg"

import AMap from 'AMap';
import mark from "@/assets/svg/mark.svg"
const Item = List.Item;
const Brief = Item.Brief;

const myImg = (src, key) => <img src={src} key={key} className="am-icon am-icon-md"
    style={{ marginLeft: "5%" }} alt="星" />;

/*
* 正在教学订单的详情页
* */
function WorkingOrderDetailsOfTutor (props) {
    console.log("WorkingOrderDetailsOfTutor--->", props);

    let [OrderDetailsData, setOrderDetailsData] = useState({ students: [], parent: {}, teacher: {}, learn_hours: "[]" }); // 相当于 this.state
    let [order_id] = useState(() => {
        if (!!props.location.state) {
            return props.location.state.order_id;
        } else {
            return sessionStorage.getItem("order_id");
        }
    });

    //分数
    let [score, setScore] = useState(0);



    //分数展示
    function scoreShow () {
        let max = 5;
        let re = [];
        for (let i = 1; i <= score; i++) {
            re.push(myImg(star_selected, i));
        }
        for (let i = score + 1; i <= max; i++) {
            re.push(myImg(star_unselected, i))
        }
        return re;
    }

    function getOrderDetails () {
        GetOrderDetails({ order_id: order_id , tutor_id: JSON.parse(sessionStorage.getItem("userInfo")).id }).then(res => {

            //非异常的请求结果，交由回调处理
            if (res[R.code] === R.success) {
                let obj = res[R.data];
                setOrderDetailsData(obj);
                setScore(obj.finish_score || 0);

                //加载地图
                if (null !== obj.longitude && null !== obj.latitude) {
                    let pp = [obj.longitude, obj.latitude];
                    let mapInstance = new AMap.Map('amap', {
                        resizeEnable: true,
                        zoomEnable: true,
                        dragEnable: true,
                        center: pp,//传入地址的经纬度
                        zoom: 13
                    });

                    mapInstance.on('complete', function () {
                        AMap.plugin(['AMap.Geocoder', 'AMap.Marker', 'AMap.LngLat', 'AMap.Pixel', 'AMap.Icon'], () => {
                            let markPoint = new AMap.Marker({
                                position: new AMap.LngLat(obj.longitude, obj.latitude),
                                offset: new AMap.Pixel(-10, -10),
                                icon: mark, // 添加 Icon 图标 URL
                                title: '上课地址',
                                label: {
                                    // content: '<span style="color: darkgreen; font-size: x-large"><strong>上课地点</strong></span>'
                                }
                            });


                            let geocoder = new AMap.Geocoder({
                                city: "", //城市设为北京，默认：“全国”
                                radius: 1000 //范围，默认：500
                            });

                            let address = ''; // 点击坐标的详细地址； 

                            geocoder.getAddress([obj.longitude, obj.latitude], (status, result) => {
                                if (status === 'complete' && result.regeocode) {
                                    address = result.regeocode.formattedAddress;

                                    //实例化信息窗体
                                    let title = '详细地址：',
                                        content = [];
                                    content.push(address);

                                    //构建自定义信息窗体
                                    let infoWindow = new AMap.InfoWindow({
                                        position: new AMap.LngLat(obj.longitude, obj.latitude),
                                        offset: new AMap.Pixel(24, -4),
                                        autoMove: true,
                                        isCustom: true,  //使用自定义窗体
                                        content: createInfoWindow(title, content.join("<br/>"), mapInstance),
                                    });

                                    infoWindow.open(mapInstance)

                                } else {
                                    console.error('根据经纬度查询地址失败')
                                }
                            });

                            //添加标识物
                            mapInstance.add(markPoint);
                        });
                    });
                }
            } else {
                Toast.fail(res[R.msg]);
            }
        }).catch(err => {
            console.log(err);
        });
    }

    useEffect(getOrderDetails, []);

    return (
        <div className="orderDetails">
            <div className="page-title  home-tit">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span key="rc"></span>}
                    onLeftClick={() => {
                        props.history.goBack()
                    }}
                >
                    订单详情
                </NavBar>
            </div>
            <div className="page-content  home-content">
                <div className="publish-content-piece">
                    <div className="form-box">
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>
                                基本要求
                            </strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <InputItem
                                    type="text"
                                    editable="false"
                                    value={OrderDetailsData.parent_name}
                                >家长姓名</InputItem>
                                <InputItem
                                    editable="false"
                                    value={OrderDetailsData.parent_gender}

                                >家长性別</InputItem>
                                <InputItem
                                    editable="false"
                                    value={OrderDetailsData.subjects}
                                >
                                    辅导科目
                                </InputItem>
                            </List>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>
                                可授课时间段
                            </strong>
                        </div>
                        <div className="form-con">
                            <Accordion defaultActiveKey="0" className="my-accordion">
                                {
                                    JSON.parse(OrderDetailsData.learn_hours) ?
                                        JSON.parse(OrderDetailsData.learn_hours).map((item, index) => {
                                            return <Accordion.Panel header={
                                                <div>
                                                    {item.week}
                                                </div>
                                            } key={index}>
                                                <List className="my-list">
                                                    <Item extra={item.startTime}>开始时间</Item>
                                                    <Item extra={item.endTime}>结束时间</Item>
                                                </List>
                                            </Accordion.Panel>
                                        })
                                        :
                                        ''
                                }
                            </Accordion>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>
                                上课地址
                            </strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <List.Item
                                    multipleLine
                                    platform="android"
                                >
                                    地址<List.Item.Brief> {OrderDetailsData.learn_address} </List.Item.Brief>
                                </List.Item>
                            </List>
                            <div id="amap"
                                style={OrderDetailsData.longitude !== null ? { width: '100%', height: '300px' } : {}}
                            />
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>对家教老师的要求</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <TextareaItem
                                    disabled
                                    editable="false"
                                    value={OrderDetailsData.demand}
                                    clear
                                    autoHeight
                                    rows={5}
                                    count={200}
                                    placeholder={"教学的附加说明"}
                                />
                            </List>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>学生</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                {OrderDetailsData.students.map((item, index) => {
                                    return (
                                        <Item key={index}
                                            arrow="empty"
                                            multipleLine
                                            onClick={() => {
                                                console.log("item-->", item);
                                            }}
                                            platform="cross"
                                        >
                                            名称：{item.name}
                                            <Brief> 年龄：{item.age}</Brief>
                                            <Brief> 年级：{item.grade}</Brief>
                                            <Brief> 说明：{item.note}</Brief>
                                        </Item>
                                    )
                                })}
                            </List>
                        </div>
                    </div>
                </div>
            </div>
        </div>);
}

WorkingOrderDetailsOfTutor = createForm()(WorkingOrderDetailsOfTutor);
export default WorkingOrderDetailsOfTutor;